<template>
	<div class="top-bar">
		<div class="top-logo f-left p-t-5">
	       <img src="static/img/logo.png" height="30px">
	    </div>
	    <div class="top-right f-right" v-if="showInfo">
	    	<el-row :gutter="14">
			  <!-- <el-col :span="10"><el-button type="info" size="mini">{{account}}</el-button></el-col> -->
			  <el-col :span="14" :offset="10">
			  	<el-button type="danger" size="mini" @click="loginOut">退出</el-button>
			  </el-col>
			</el-row>
	    </div>
	</div>
</template>
<script>
  	import {
    	userService
  	}from "api"
	export default{
		data(){
			return {
				brand: 1,
				account: "皓宸",
				showInfo: true
			}
		},
		methods:{
			loginOut(){
		        userService.loginOut()
	          this.$notify({
	            message: '退出成功！',
	            type: 'success'
	          })
	          this.$router.push("/login")
			}
		}
	}
</script>
<style scoped>
	.el-button--danger{
		background: #ff5a5f;
		border-color: #ff5a5f;
	}
	.top-bar{
		width: 100%;
		height: 50px;
		background: #313131;
		color: white;
		padding: 5px 6%;
		position: fixed;
		top:0;
		left:0;
		z-index: 9;
	}
	.top-logo{
		width: 20%;
		text-align: left;
	}
	.top-logo > img{
		/*transform: scale(2);*/
	}
	.top-right{
		width: 160px;
		padding-top: 7px;
		text-align: right;
	}
</style>